<template>
    <div class="home">
        <!-- 顶部弹窗 -->
        <MyTop v-if="show" />
        <!-- 头部 -->
        <MyHeader v-bind:class="{'my-header-fixed':!show}" />
        <!-- 页面主体内容 -->
        <div v-bind:class="{'container-fixed':!show}" class="container">
            <!-- 轮播图 -->
            <div class="slider">
                <img src="@/assets/uploads/banner01.jpg" alt />
            </div>
            <!-- 品牌 -->
            <div class="brand">
                <div class="brand-item">
                    <img src="@/assets/uploads/brand01.png" alt />
                </div>
                <div class="brand-item">
                    <img src="@/assets/uploads/brand02.png" alt />
                </div>
                <div class="brand-item">
                    <img src="@/assets/uploads/brand03.png" alt />
                </div>
            </div>
            <!-- grid 宫格 在pc模式下,这个宫格会导致NavBar组件的宽度变大15px -->
            <ul class="grid">
                <li>
                    <a href="#">
                        <img src="@/assets/uploads/grid01.png" alt />
                        <span>京东超市</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="@/assets/uploads/grid02.png" alt />
                        <span>数码电器</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="@/assets/uploads/grid03.png" alt />
                        <span>京东服饰</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="@/assets/uploads/grid04.png" alt />
                        <span>京东生鲜</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="@/assets/uploads/grid05.png" alt />
                        <span>京东到家</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="@/assets/uploads/grid06.png" alt />
                        <span>充值缴费</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="@/assets/uploads/grid07.png" alt />
                        <span>9.9元拼</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="@/assets/uploads/grid08.png" alt />
                        <span>领券</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="@/assets/uploads/grid09.png" alt />
                        <span>赚钱</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="@/assets/uploads/grid10.png" alt />
                        <span>PLUS会员</span>
                    </a>
                </li>
            </ul>

            <!-- 新闻 -->
            <div class="news">
                <div>
                    <img src="@/assets/uploads/news01.png" />
                </div>
                <div>
                    <img src="@/assets/uploads/news02.png" />
                </div>
            </div>

            <!-- 大图展示 东家小院 -->
            <div class="floor-wrap">
                <div class="i">
                    <img src="@/assets/uploads/dongjiaxiaoyuan.png" alt />
                </div>
                <ul class="floor">
                    <li class="combine">
                        <span class="top-text">下厨做饭</span>
                        <span class="bottom-text">尽享鲜香</span>
                        <div>
                            <img src="@/assets/uploads/floor/top01.jpg" alt />
                            <img src="@/assets/uploads/floor/top02.jpg" alt />
                        </div>
                    </li>
                    <li class="combine">
                        <span class="top-text">唱片潮流</span>
                        <span class="bottom-text">遇见春光</span>
                        <div>
                            <img src="@/assets/uploads/floor/top03.jpg" alt />
                            <img src="@/assets/uploads/floor/top04.jpg" alt />
                        </div>
                    </li>

                    <li>
                        <span class="top-text">租房贵族</span>
                        <span class="bottom-text">拎包入住</span>
                        <div>
                            <img src="@/assets/uploads/floor/bottom01.jpg" alt />
                        </div>
                    </li>
                    <li>
                        <span class="top-text">年味厨房</span>
                        <span class="bottom-text">厨房年货</span>
                        <div>
                            <img src="@/assets/uploads/floor/bottom02.jpg" alt />
                        </div>
                    </li>
                    <li>
                        <span class="top-text">八倍洁净</span>
                        <span class="bottom-text">长效留香</span>
                        <div>
                            <img src="@/assets/uploads/floor/bottom03.jpg" alt />
                        </div>
                    </li>
                    <li>
                        <span class="top-text">科普好书</span>
                        <span class="bottom-text">探索真相</span>
                        <div>
                            <img src="@/assets/uploads/floor/bottom04.jpg" alt />
                        </div>
                    </li>
                </ul>
            </div>
            <!-- 大图展示 每日逛-->
            <div class="floor-guang">
                <div class="i">
                    <img src="@/assets/uploads/meiriguang.png" alt />
                </div>
                <ul class="floor">
                    <li class>
                        <span class="top-text">科普好书</span>
                        <span class="bottom-text">探索真相</span>
                        <div>
                            <img src="@/assets/uploads/floor/bottom04.jpg" alt />
                        </div>
                    </li>
                    <li class>
                        <span class="top-text">科普好书</span>
                        <span class="bottom-text">探索真相</span>
                        <div>
                            <img src="@/assets/uploads/floor/bottom04.jpg" alt />
                        </div>
                    </li>
                    <li class>
                        <span class="top-text">科普好书</span>
                        <span class="bottom-text">探索真相</span>
                        <div>
                            <img src="@/assets/uploads/floor/bottom04.jpg" alt />
                        </div>
                    </li>
                    <li class>
                        <span class="top-text">科普好书</span>
                        <span class="bottom-text">探索真相</span>
                        <div>
                            <img src="@/assets/uploads/floor/bottom04.jpg" alt />
                        </div>
                    </li>
                    <li class>
                        <span class="top-text">科普好书</span>
                        <span class="bottom-text">探索真相</span>
                        <div>
                            <img src="@/assets/uploads/floor/bottom04.jpg" alt />
                        </div>
                    </li>
                    <li class>
                        <span class="top-text">科普好书</span>
                        <span class="bottom-text">探索真相</span>
                        <div>
                            <img src="@/assets/uploads/floor/bottom04.jpg" alt />
                        </div>
                    </li>
                    <li class>
                        <span class="top-text">科普好书</span>
                        <span class="bottom-text">探索真相</span>
                        <div>
                            <img src="@/assets/uploads/floor/bottom04.jpg" alt />
                        </div>
                    </li>
                    <li class>
                        <span class="top-text">科普好书</span>
                        <span class="bottom-text">探索真相</span>
                        <div>
                            <img src="@/assets/uploads/floor/bottom04.jpg" alt />
                        </div>
                    </li>
                </ul>
            </div>
            <!-- 商品推荐列表 -->
            <div class="goods">
                <div class="i">
                    <img src="@/assets/uploads/tuijian.png" alt />
                </div>
                <ul class="goods-list">
                    <li>
                        <a href="#" class="goods-item">
                            <img src="@/assets/uploads/goods/goods01.jpg" alt />
                            <span
                                class="info"
                            >UNIKOO 【双台装】 对讲机 专业民用商用医院办公酒店餐饮户外大功率对讲机迷你手台 实力版U1 爆款升级【双台装】118元</span>
                            <span class="price">¥&nbsp;118.00</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="goods-item">
                            <img src="@/assets/uploads/goods/goods01.jpg" alt />
                            <span
                                class="info"
                            >UNIKOO 【双台装】 对讲机 专业民用商用医院办公酒店餐饮户外大功率对讲机迷你手台 实力版U1 爆款升级【双台装】118元</span>
                            <span class="price">¥&nbsp;118.00</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="goods-item">
                            <img src="@/assets/uploads/goods/goods01.jpg" alt />
                            <span
                                class="info"
                            >UNIKOO 【双台装】 对讲机 专业民用商用医院办公酒店餐饮户外大功率对讲机迷你手台 实力版U1 爆款升级【双台装】118元</span>
                            <span class="price">¥&nbsp;118.00</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="goods-item">
                            <img src="@/assets/uploads/goods/goods01.jpg" alt />
                            <span
                                class="info"
                            >UNIKOO 【双台装】 对讲机 专业民用商用医院办公酒店餐饮户外大功率对讲机迷你手台 实力版U1 爆款升级【双台装】118元</span>
                            <span class="price">¥&nbsp;118.00</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="goods-item">
                            <img src="@/assets/uploads/goods/goods01.jpg" alt />
                            <span
                                class="info"
                            >UNIKOO 【双台装】 对讲机 专业民用商用医院办公酒店餐饮户外大功率对讲机迷你手台 实力版U1 爆款升级【双台装】118元</span>
                            <span class="price">¥&nbsp;118.00</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="goods-item">
                            <img src="@/assets/uploads/goods/goods01.jpg" alt />
                            <span
                                class="info"
                            >UNIKOO 【双台装】 对讲机 专业民用商用医院办公酒店餐饮户外大功率对讲机迷你手台 实力版U1 爆款升级【双台装】118元</span>
                            <span class="price">¥&nbsp;118.00</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="goods-item">
                            <img src="@/assets/uploads/goods/goods01.jpg" alt />
                            <span
                                class="info"
                            >UNIKOO 【双台装】 对讲机 专业民用商用医院办公酒店餐饮户外大功率对讲机迷你手台 实力版U1 爆款升级【双台装】118元</span>
                            <span class="price">¥&nbsp;118.00</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 底部footer -->
        <MyFooter />
        <!-- 底部导航条 -->
        <NavBar :flag="route" />
    </div>
</template>

<script>
// @ is an alias to /src
import MyTop from "@/components/MyTop.vue";
import MyHeader from "@/components/MyHeader.vue";
import MyFooter from "@/components/MyFooter.vue";
import NavBar from "@/components/NavBar.vue";

export default {
    name: "home",
    components: {
        MyTop,
        MyHeader,
        MyFooter,
        NavBar
    },
    data() {
        return {
            scrollY: 0,
            route: "home"
        };
    },
    mounted() {
        window.addEventListener("scroll", this.handleScroll);
    },
    computed: {
        show() {
            console.log("computed::" + this.scrollY);
            //这个100是顶部弹窗的高度
            if (this.scrollY <= 45) {
                return true;
            } else {
                return false;
            }
        }
    },
    methods: {
        handleScroll() {
            let scrollY =
                window.pageYOffset ||
                document.documentElement.scrollTop ||
                document.body.scrollTop;
            this.scrollY = scrollY;
        }
    }
};
</script>

<style lang="scss">
// @import "~@/styles/home.scss";
.home {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    width: 100%;
    .container {
        // width: 100%;
        .slider {
            img {
                width: 100%;
            }
        }
        .brand {
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            box-sizing: border-box;
            border-radius: 20px 20px 0 0;
            .brand-item {
                flex: 1;
                // width: 33.33%;
                // padding: 0 5px;
                img {
                    width: 100%;
                }
            }
        }
        .grid {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            padding: 0;
            margin: 0;
            li {
                flex: 20%;
                a {
                    display: flex;
                    text-decoration: none;
                    height: 75px;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    img {
                        width: 40px;
                        height: 40px;
                        margin: 4px 2px 2px 0px;
                    }
                    span {
                        color: #666;
                        font-size: 12px;
                        margin: 6px 0px 0px;
                    }
                }
            }
        }
        .news {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: center;
            padding: 4px 10px;
            div {
                flex: 1;
                img {
                    width: 100%;
                }
                &:nth-child(1) img {
                    border-top-left-radius: 8px;
                    border-bottom-left-radius: 8px;
                }
                &:nth-child(2) img {
                    border-top-right-radius: 8px;
                    border-bottom-right-radius: 8px;
                }
            }
        }
        .floor-wrap {
            background-color: #fff;
            margin-top: 15px;
            .i {
                background-color: #f6f6f6;
                img {
                    width: 100%;
                }
            }
            .floor {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                padding: 0;
                margin: 0;
                li {
                    width: 25%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    box-sizing: border-box;
                    padding: 15px 5px;
                    span.top-text {
                    }
                    span.bottom-text {
                    }
                    div {
                        display: flex;
                        flex-direction: row;
                        flex-wrap: wrap;
                        justify-content: center;
                        align-items: center;
                        img {
                            width: 60px;
                        }
                    }
                    &[class="combine"] {
                        width: 50%;
                    }
                    &:nth-child(1) {
                        border-right: 1px solid #ddd;
                    }
                    &:nth-child(n + 3) {
                        border-top: 1px solid #ddd;
                        border-right: 1px solid #ddd;
                    }
                    &:nth-child(6) {
                        border-right: 0;
                    }
                }
            }
        }
        .floor-guang {
            background-color: #fff;
            margin-top: 15px;
            .i {
                background-color: #f6f6f6;
                img {
                    width: 100%;
                }
            }
            .floor {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                padding: 0;
                margin: 0;
                li {
                    width: 25%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    box-sizing: border-box;
                    padding: 15px 5px;
                    border-right: 1px solid #ddd;
                    border-bottom: 1px solid #ddd;
                    span.top-text {
                    }
                    span.bottom-text {
                    }
                    div {
                        display: flex;
                        flex-direction: row;
                        flex-wrap: wrap;
                        justify-content: center;
                        align-items: center;
                        img {
                            width: 60px;
                        }
                    }

                    &:nth-child(4) {
                        border-right: 0;
                    }
                    &:nth-child(8) {
                        border-right: 0;
                    }
                    &:nth-child(n + 5) {
                        border-bottom: 0;
                    }
                }
            }
        }
        .goods {
            background-color: #fff;
            margin-top: 15px;
            .i {
                width: 100%;
                background-color: #fff;
                img {
                    width: 100%;
                }
            }
            .goods-list {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: flex-start;
                align-items: center;
                padding: 0;
                margin: 0;
                li {
                    width: 50%;
                    box-sizing: border-box;
                    border: 1px solid #f6f6f6;
                    margin-top: 4px;
                    padding: 0px 4px;
                    a {
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        text-decoration: none;
                        img {
                            width: 100%;
                        }
                        .info {
                            font-size: 12px;
                            color: #232326;
                            padding: 0px 8px;
                        }
                        .price {
                            font-size: 13px;
                            color: #f23030;
                            padding: 0px 8px;
                        }
                    }
                }
            }
        }
    }
    .container-fixed {
        // 这个89是顶部弹窗高度+my-header组件中的高度
        margin-top: 89px;
    }
}
</style>
